<%@page pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp"%>

<body>
	<div id="app" v-cloak>

		<!--条件查询 -->
		<div class="toolbar2">
			<el-form :inline="true" :model="filters" label-position="top" size="small">
				<div style="margin-left: 16px;position: relative;">
					<el-form-item label="经营区域">
						<el-cascader v-model="regionIds" :options="regionData" :props="regionProps" @change="handleRegionChange"
						 clearable></el-cascader>
					</el-form-item>
					<el-form-item label="经营户" prop="individualId">
						<el-select v-model="filters.individualId" clearable filterable placeholder="请选择">
							<el-option v-for="item in individualData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<div style="display:flex;flex-wrap:wrap;" :style="{height:tableH+'px'}">
			<el-card v-for="item in tableData" :body-style="{padding: '5px',float:'left'}" style="height: 330px;margin: 10px;">
				<img :src="'${imgesBaseUrl}/' + item.imageUrl" class="image" style="width: 200px;height: 250px;">
				<div style="padding: 14px;">
					<span>{{item.foodName}}</span>
					<div class="bottom clearfix">
						<time class="time">{{item.individualName}}</time>
					</div>
				</div>
			</el-card>
		</div>


	</div>
</body>
<script>
	$(window).resize(function() {
		app.tableH = $(window).height() - 155;
	});

	var app = new Vue({
		el: '#app',
		data: {
			isMobile: '${isMobile}',
			tableH: $(window).height() - 155,
			loading: false,
			page: 1,
			size: 999,
			total: 0,
			filters: {},
			editFormVisible: false,
			regionIds: [],
			regionData: [],
			regionProps: {
				label: 'name',
				value: 'id',
				children: 'children',
				checkStrictly: true
			},
			individualData: [],
			editLoading: false,
			editForm: {},
			tableData: []
		},
		created: function() {
			this.loadData();
			this.loadRegionData();
			this.loadIndividualData();
		},
		methods: {
			loadData: function() {
				this.loading = true;
				var data = Object.assign({}, this.filters);
				data.page = this.page;
				data.size = this.size;
				$.ajax({
					url: "${ctx}/backstage/specialFood/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.total = returndata.data.count;
							app.tableData = returndata.data.list;
						} else {
							app.total = 0;
							app.tableData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.loading = false;
					}
				});
			},
			loadIndividualData: function() {
				$.ajax({
					url: "${ctx}/backstage/individual/query",
					data: {
						roleId: 2,
						page: 1,
						size: 99
					},
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.individualData = returndata.data.list;
						} else {
							app.individualData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			loadRegionData: function() {
				$.ajax({
					url: "${ctx}/backstage/town/queryRegion",
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.regionData = returndata.data;
						} else {
							app.regionData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			handleSearch: function() {
				this.loadData();
			},
			sizeChange: function(val) {
				this.size = val;
				this.loadData();
			},
			handleCurrentChange: function(val) {
				this.page = val;
				this.loadData();
			},
			handleRegionChange: function(val) {
				switch (val.length) {
					case 0:
						this.filters.districtId = '';
						this.filters.townId = '';
						break;
					case 1:
						this.filters.districtId = val[0];
						this.filters.townId = '';
						break;
					case 2:
						this.filters.districtId = val[0];
						this.filters.townId = val[1];
						break;
				}
			}
		}
	});
</script>
